<!doctype html>
<html>
<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
<link rel="stylesheet" href="./css/bootstrap.min.css">  
<link rel="icon" href="./img/tx1.jpg" type="image/x-icon">
<link rel="stylesheet" href="./css/index.css">
<title>知否</title><link href='https://fonts.loli.net/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext' rel='stylesheet' type='text/css' /><style type='text/css'>html {overflow-x: initial !important;}:root { --bg-color:#ffffff; --text-color:#333333; --select-text-bg-color:#B5D6FC; --select-text-font-color:auto; --monospace:"Lucida Console",Consolas,"Courier",monospace; }
html { font-size: 14px; background-color: var(--bg-color); color: var(--text-color); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body { margin: 0px; padding: 0px; height: auto; bottom: 0px; top: 0px; left: 0px; right: 0px; font-size: 1rem; line-height: 1.42857; overflow-x: hidden; background: inherit; tab-size: 4; }
iframe { margin: auto; }
a.url { word-break: break-all; }
a:active, a:hover { outline: 0px; }
.in-text-selection, ::selection { text-shadow: none; background: var(--select-text-bg-color); color: var(--select-text-font-color); }
#write { margin: 0px auto; height: auto; width: inherit; word-break: normal; overflow-wrap: break-word; position: relative; white-space: normal; overflow-x: visible; padding-top: 40px; }
#write.first-line-indent p { text-indent: 2em; }
#write.first-line-indent li p, #write.first-line-indent p * { text-indent: 0px; }
#write.first-line-indent li { margin-left: 2em; }
.for-image #write { padding-left: 8px; padding-right: 8px; }
body.typora-export { padding-left: 30px; padding-right: 30px; }
.typora-export .footnote-line, .typora-export li, .typora-export p { white-space: pre-wrap; }
@media screen and (max-width: 500px) {
  body.typora-export { padding-left: 0px; padding-right: 0px; }
  #write { padding-left: 20px; padding-right: 20px; }
  .CodeMirror-sizer { margin-left: 0px !important; }
  .CodeMirror-gutters { display: none !important; }
}
#write li > figure:last-child { margin-bottom: 0.5rem; }
#write ol, #write ul { position: relative; }
img { max-width: 100%; vertical-align: middle; image-orientation: from-image; }
button, input, select, textarea { color: inherit; font: inherit; }
input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0px; }
*, ::after, ::before { box-sizing: border-box; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { width: inherit; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p { position: relative; }
p { line-height: inherit; }
h1, h2, h3, h4, h5, h6 { break-after: avoid-page; break-inside: avoid; orphans: 4; }
p { orphans: 4; }
h1 { font-size: 2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
.md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { margin-top: 1rem; margin-bottom: 1rem; }
.hidden { display: none; }
.md-blockmeta { color: rgb(204, 204, 204); font-weight: 700; font-style: italic; }
a { cursor: pointer; }
sup.md-footnote { padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgb(85, 85, 85); border-radius: 4px; cursor: pointer; }
sup.md-footnote a, sup.md-footnote a:hover { color: inherit; text-transform: inherit; text-decoration: inherit; }
#write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit; }
figure { overflow-x: auto; margin: 1.2em 0px; max-width: calc(100% + 16px); padding: 0px; }
figure > table { margin: 0px; }
tr { break-inside: avoid; break-after: auto; }
thead { display: table-header-group; }
table { border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: auto; break-inside: auto; text-align: left; }
table.md-table td { min-width: 32px; }
.CodeMirror-gutters { border-right: 0px; background-color: inherit; }
.CodeMirror-linenumber { user-select: none; }
.CodeMirror { text-align: left; }
.CodeMirror-placeholder { opacity: 0.3; }
.CodeMirror pre { padding: 0px 4px; }
.CodeMirror-lines { padding: 0px; }
div.hr:focus { cursor: none; }
#write pre { white-space: pre-wrap; }
#write.fences-no-line-wrapping pre { white-space: pre; }
#write pre.ty-contain-cm { white-space: normal; }
.CodeMirror-gutters { margin-right: 4px; }
.md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; background: inherit; position: relative !important; }
.md-diagram-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0px; padding-bottom: 8px; overflow-x: auto; }
#write .md-fences.mock-cm { white-space: pre-wrap; }
.md-fences.md-fences-with-lineno { padding-left: 0px; }
#write.fences-no-line-wrapping .md-fences.mock-cm { white-space: pre; overflow-x: auto; }
.md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px; }
.CodeMirror-line, twitterwidget { break-inside: avoid; }
.footnotes { opacity: 0.8; font-size: 0.9rem; margin-top: 1em; margin-bottom: 1em; }
.footnotes + .footnotes { margin-top: 0px; }
.md-reset { margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: top; background: 0px 0px; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; -webkit-tap-highlight-color: transparent; line-height: normal; font-weight: 400; text-align: left; box-sizing: content-box; direction: ltr; }
li div { padding-top: 0px; }
blockquote { margin: 1rem 0px; }
li .mathjax-block, li p { margin: 0.5rem 0px; }
li { margin: 0px; position: relative; }
blockquote > :last-child { margin-bottom: 0px; }
blockquote > :first-child, li > :first-child { margin-top: 0px; }
.footnotes-area { color: rgb(136, 136, 136); margin-top: 0.714rem; padding-bottom: 0.143rem; white-space: normal; }
#write .footnote-line { white-space: pre-wrap; }
@media print {
  body, html { border: 1px solid transparent; height: 99%; break-after: avoid; break-before: avoid; font-variant-ligatures: no-common-ligatures; }
  #write { margin-top: 0px; padding-top: 0px; border-color: transparent !important; }
  .typora-export * { -webkit-print-color-adjust: exact; }
  html.blink-to-pdf { font-size: 13px; }
  .typora-export #write { padding-left: 32px; padding-right: 32px; padding-bottom: 0px; break-after: avoid; }
  .typora-export #write::after { height: 0px; }
  .is-mac table { break-inside: avoid; }
}
.footnote-line { margin-top: 0.714em; font-size: 0.7em; }
a img, img a { cursor: pointer; }
pre.md-meta-block { font-size: 0.8rem; min-height: 0.8rem; white-space: pre-wrap; background: rgb(204, 204, 204); display: block; overflow-x: hidden; }
p > .md-image:only-child:not(.md-img-error) img, p > img:only-child { display: block; margin: auto; }
#write.first-line-indent p > .md-image:only-child:not(.md-img-error) img { left: -2em; position: relative; }
p > .md-image:only-child { display: inline-block; width: 100%; }
#write .MathJax_Display { margin: 0.8em 0px 0px; }
.md-math-block { width: 100%; }
.md-math-block:not(:empty)::after { display: none; }
[contenteditable="true"]:active, [contenteditable="true"]:focus, [contenteditable="false"]:active, [contenteditable="false"]:focus { outline: 0px; box-shadow: none; }
.md-task-list-item { position: relative; list-style-type: none; }
.task-list-item.md-task-list-item { padding-left: 0px; }
.md-task-list-item > input { position: absolute; top: 0px; left: 0px; margin-left: -1.2em; margin-top: calc(1em - 10px); border: none; }
.math { font-size: 1rem; }
.md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px; }
.md-toc-content { position: relative; margin-left: 0px; }
.md-toc-content::after, .md-toc::after { display: none; }
.md-toc-item { display: block; color: rgb(65, 131, 196); }
.md-toc-item a { text-decoration: none; }
.md-toc-inner:hover { text-decoration: underline; }
.md-toc-inner { display: inline-block; cursor: pointer; }
.md-toc-h1 .md-toc-inner { margin-left: 0px; font-weight: 700; }
.md-toc-h2 .md-toc-inner { margin-left: 2em; }
.md-toc-h3 .md-toc-inner { margin-left: 4em; }
.md-toc-h4 .md-toc-inner { margin-left: 6em; }
.md-toc-h5 .md-toc-inner { margin-left: 8em; }
.md-toc-h6 .md-toc-inner { margin-left: 10em; }
@media screen and (max-width: 48em) {
  .md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
  .md-toc-h4 .md-toc-inner { margin-left: 5em; }
  .md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
  .md-toc-h6 .md-toc-inner { margin-left: 8em; }
}
a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
.footnote-line a:not(.reversefootnote) { color: inherit; }
.md-attr { display: none; }
.md-fn-count::after { content: "."; }
code, pre, samp, tt { font-family: var(--monospace); }
kbd { margin: 0px 0.1em; padding: 0.1em 0.6em; font-size: 0.8em; color: rgb(36, 39, 41); background: rgb(255, 255, 255); border: 1px solid rgb(173, 179, 185); border-radius: 3px; box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset; white-space: nowrap; vertical-align: middle; }
.md-comment { color: rgb(162, 127, 3); opacity: 0.8; font-family: var(--monospace); }
code { text-align: left; vertical-align: initial; }
a.md-print-anchor { white-space: pre !important; border-width: initial !important; border-style: none !important; border-color: initial !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0px !important; outline: 0px !important; background: 0px 0px !important; text-decoration: initial !important; text-shadow: initial !important; }
.md-inline-math .MathJax_SVG .noError { display: none !important; }
.html-for-mac .inline-math-svg .MathJax_SVG { vertical-align: 0.2px; }
.md-math-block .MathJax_SVG_Display { text-align: center; margin: 0px; position: relative; text-indent: 0px; max-width: none; max-height: none; min-height: 0px; min-width: 100%; width: auto; overflow-y: hidden; display: block !important; }
.MathJax_SVG_Display, .md-inline-math .MathJax_SVG_Display { width: auto; margin: inherit; display: inline-block !important; }
.MathJax_SVG .MJX-monospace { font-family: var(--monospace); }
.MathJax_SVG .MJX-sans-serif { font-family: sans-serif; }
.MathJax_SVG { display: inline; font-style: normal; font-weight: 400; line-height: normal; zoom: 90%; text-indent: 0px; text-align: left; text-transform: none; letter-spacing: normal; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; }
.MathJax_SVG * { transition: none 0s ease 0s; }
.MathJax_SVG_Display svg { vertical-align: middle !important; margin-bottom: 0px !important; margin-top: 0px !important; }
.os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif; }
.md-diagram-panel > svg { max-width: 100%; }
[lang="flow"] svg, [lang="mermaid"] svg { max-width: 100%; height: auto; }
[lang="mermaid"] .node text { font-size: 1rem; }
table tr th { border-bottom: 0px; }
video { max-width: 100%; display: block; margin: 0px auto; }
iframe { max-width: 100%; width: 100%; border: none; }
.highlight td, .highlight tr { border: 0px; }
svg[id^="mermaidChart"] { line-height: 1em; }
mark { background: rgb(255, 255, 0); color: rgb(0, 0, 0); }
.md-html-inline .md-plain, .md-html-inline strong, mark .md-inline-math, mark strong { color: inherit; }
mark .md-meta { color: rgb(0, 0, 0); opacity: 0.3 !important; }


:root {
    --side-bar-bg-color: #fafafa;
    --control-text-color: #777;
}

@include-when-export url(https://fonts.loli.net/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);

/* open-sans-regular - latin-ext_latin */
  /* open-sans-italic - latin-ext_latin */
    /* open-sans-700 - latin-ext_latin */
    /* open-sans-700italic - latin-ext_latin */
  html {
    font-size: 16px;
}

body {
    font-family: "Open Sans","Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: rgb(51, 51, 51);
    line-height: 1.6;
}

#write {
    max-width: 860px;
  	margin: 0 auto;
  	padding: 30px;
    padding-bottom: 100px;
}

@media only screen and (min-width: 1400px) {
	#write {
		max-width: 1024px;
	}
}

@media only screen and (min-width: 1800px) {
	#write {
		max-width: 1200px;
	}
}

#write > ul:first-child,
#write > ol:first-child{
    margin-top: 30px;
}

a {
    color: #4183C4;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
}
h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {
    text-decoration: none;
}
h1 tt,
h1 code {
    font-size: inherit;
}
h2 tt,
h2 code {
    font-size: inherit;
}
h3 tt,
h3 code {
    font-size: inherit;
}
h4 tt,
h4 code {
    font-size: inherit;
}
h5 tt,
h5 code {
    font-size: inherit;
}
h6 tt,
h6 code {
    font-size: inherit;
}
h1 {
    padding-bottom: .3em;
    font-size: 2.25em;
    line-height: 1.2;
    border-bottom: 1px solid #eee;
}
h2 {
   padding-bottom: .3em;
    font-size: 1.75em;
    line-height: 1.225;
    border-bottom: 1px solid #eee;
}
h3 {
    font-size: 1.5em;
    line-height: 1.43;
}
h4 {
    font-size: 1.25em;
}
h5 {
    font-size: 1em;
}
h6 {
   font-size: 1em;
    color: #777;
}
p,
blockquote,
ul,
ol,
dl,
table{
    margin: 0.8em 0;
}
li>ol,
li>ul {
    margin: 0 0;
}
hr {
    height: 2px;
    padding: 0;
    margin: 16px 0;
    background-color: #e7e7e7;
    border: 0 none;
    overflow: hidden;
    box-sizing: content-box;
}

li p.first {
    display: inline-block;
}
ul,
ol {
    padding-left: 30px;
}
ul:first-child,
ol:first-child {
    margin-top: 0;
}
ul:last-child,
ol:last-child {
    margin-bottom: 0;
}
blockquote {
    border-left: 4px solid #dfe2e5;
    padding: 0 15px;
    color: #777777;
}
blockquote blockquote {
    padding-right: 0;
}
table {
    padding: 0;
    word-break: initial;
}
table tr {
    border-top: 1px solid #dfe2e5;
    margin: 0;
    padding: 0;
}
table tr:nth-child(2n),
thead {
    background-color: #f8f8f8;
}
table tr th {
    font-weight: bold;
    border: 1px solid #dfe2e5;
    border-bottom: 0;
    margin: 0;
    padding: 6px 13px;
}
table tr td {
    border: 1px solid #dfe2e5;
    margin: 0;
    padding: 6px 13px;
}
table tr th:first-child,
table tr td:first-child {
    margin-top: 0;
}
table tr th:last-child,
table tr td:last-child {
    margin-bottom: 0;
}

.CodeMirror-lines {
    padding-left: 4px;
}

.code-tooltip {
    box-shadow: 0 1px 1px 0 rgba(0,28,36,.3);
    border-top: 1px solid #eef2f2;
}

.md-fences,
code,
tt {
    border: 1px solid #e7eaed;
    background-color: #f8f8f8;
    border-radius: 3px;
    padding: 0;
    padding: 2px 4px 0px 4px;
    font-size: 0.9em;
}

code {
    background-color: #f3f4f4;
    padding: 0 2px 0 2px;
}

.md-fences {
    margin-bottom: 15px;
    margin-top: 15px;
    padding-top: 8px;
    padding-bottom: 6px;
}


.md-task-list-item > input {
  margin-left: -1.3em;
}

@media print {
    html {
        font-size: 13px;
    }
    table,
    pre {
        page-break-inside: avoid;
    }
    pre {
        word-wrap: break-word;
    }
}

.md-fences {
	background-color: #f8f8f8;
}
#write pre.md-meta-block {
	padding: 1rem;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f7f7f7;
    border: 0;
    border-radius: 3px;
    color: #777777;
    margin-top: 0 !important;
}

.mathjax-block>.code-tooltip {
	bottom: .375rem;
}

.md-mathjax-midline {
    background: #fafafa;
}

#write>h3.md-focus:before{
	left: -1.5625rem;
	top: .375rem;
}
#write>h4.md-focus:before{
	left: -1.5625rem;
	top: .285714286rem;
}
#write>h5.md-focus:before{
	left: -1.5625rem;
	top: .285714286rem;
}
#write>h6.md-focus:before{
	left: -1.5625rem;
	top: .285714286rem;
}
.md-image>.md-meta {
    /*border: 1px solid #ddd;*/
    border-radius: 3px;
    padding: 2px 0px 0px 4px;
    font-size: 0.9em;
    color: inherit;
}

.md-tag {
    color: #a7a7a7;
    opacity: 1;
}

.md-toc { 
    margin-top:20px;
    padding-bottom:20px;
}

.sidebar-tabs {
    border-bottom: none;
}

#typora-quick-open {
    border: 1px solid #ddd;
    background-color: #f8f8f8;
}

#typora-quick-open-item {
    background-color: #FAFAFA;
    border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee;
    border-style: solid;
    border-width: 1px;
}

/** focus mode */
.on-focus-mode blockquote {
    border-left-color: rgba(85, 85, 85, 0.12);
}

header, .context-menu, .megamenu-content, footer{
    font-family: "Segoe UI", "Arial", sans-serif;
}

.file-node-content:hover .file-node-icon,
.file-node-content:hover .file-node-open-state{
    visibility: visible;
}

.mac-seamless-mode #typora-sidebar {
    background-color: #fafafa;
    background-color: var(--side-bar-bg-color);
}

.md-lang {
    color: #b4654d;
}

.html-for-mac .context-menu {
    --item-hover-bg-color: #E6F0FE;
}

#md-notification .btn {
    border: 0;
}

.dropdown-menu .divider {
    border-color: #e5e5e5;
}

.ty-preferences .window-content {
    background-color: #fafafa;
}

.ty-preferences .nav-group-item.active {
    color: white;
    background: #999;
}


</style>
</head>
<body class='typora-export os-windows' >
	<button id="mode-toggle" class="btn" >💡</button>
	<!--返回顶部-->
	<div class="home">
		<a href="../front.html" class="glyphicon glyphicon-menu-left"></a>
	</div>
	<button onclick="topFunction()" id="topButton" class="glyphicon glyphicon-menu-up"></button>
	<button onclick="showOrCloseCategory()" id="foldOrUnfold" class="glyphicon glyphicon-th-large"></button>
	
	<!--文章主体部分-->
	<div class="book-body" id="book_body"> </div>
	<!--目录栏-->
	<div class="book-summary" id="category" style="display:none"></div>
<div  id='write'  class = ''><ol><li><h1><a name="前端学习路线-by-程序员鱼皮" class="md-header-anchor"></a><span>前端学习路线</span></h1><p><span>建议先观看视频导读：</span><a href='https://www.bilibili.com/video/BV1nh411e7oG/'><span>https://www.bilibili.com/video/BV1nh411e7oG/(opens new window)</span></a></p><h2><a name="路线特点" class="md-header-anchor"></a><span>路线特点</span></h2><ol><li><span>一份全面的前端知识点大梳理和汇总</span></li><li><span>分阶段学习，每个阶段给出学习目标</span></li><li><span>使用符号对知识点的重要程度做了区分，按需学习</span></li><li><span>知识点附有描述和资源链接</span></li><li><span>提供一份清晰的个人顺序学习路线方法</span></li><li><span>提供大量优质学习资源</span></li></ol><h2><a name="符号表" class="md-header-anchor"></a><span>符号表</span></h2><p><span>可根据知识点前的符号按需选学，并获取知识点描述和学习资源。</span></p><ul><li><span>⭐️ 必学（追求速成）</span></li><li><span>✅ 建议学（重要知识）</span></li><li><span>❗ 面试重点</span></li><li><span>❌ 一般没必要学习</span></li><li><span>💬 描述</span></li><li><span>📚 资源</span></li><li><span>🎯 目标</span></li></ul><h2><a name="大纲" class="md-header-anchor"></a><span>大纲</span></h2><ol><li><p><span>前言 - 学编程需要的特质</span></p></li><li><p><span>前端学习七阶段</span></p><ol><li><span>前端入门</span></li><li><span>巩固基础</span></li><li><span>前端工程化</span></li><li><span>前端优化</span></li><li><span>前端生态</span></li><li><span>前端求职</span></li><li><span>前端未来</span></li></ol></li><li><p><span>我的前端学习路线</span></p></li><li><p><span>尾声 - 持续学习</span></p></li></ol><h2><a name="前言---学编程需要的特质" class="md-header-anchor"></a><span>前言 - 学编程需要的特质</span></h2><p><span>相信自己有能力，那么你就真的会有！</span></p><ul><li><span>兴趣</span></li><li><span>坚持</span></li><li><span>付出</span></li><li><span>心态</span></li></ul><h2><a name="一前端入门" class="md-header-anchor"></a><span>一、前端入门</span></h2><ul><li><p><span>💬 描述：学习前端基础三件套，建议从实战开始，边学边练，培养兴趣，快速入门。</span></p></li><li><p><span>📚 资源</span></p><ul><li><span>freeCodecamp 在线编程：</span><a href='https://www.freecodecamp.org/'><span>https://www.freecodecamp.org/(opens new window)</span></a></li><li><span>阿里云前端实战学习：</span><a href='https://edu.aliyun.com/roadmap/frontend'><span>https://edu.aliyun.com/roadmap/frontend(opens new window)</span></a></li><li><span>W3Cschool 编程入门实战：</span><a href='https://www.w3cschool.cn/codecamp/'><span>https://www.w3cschool.cn/codecamp/(opens new window)</span></a></li><li><span>pink老师前端入门教程：</span><a href='https://www.bilibili.com/video/BV14J4114768'><span>https://www.bilibili.com/video/BV14J4114768(opens new window)</span></a></li></ul></li><li><p><span>🎯 目标：了解和实践各语言的基础语法，并能使用开发工具来独立开发一个留言板网站。</span></p></li></ul><h3><a name="⭐️-开发工具" class="md-header-anchor"></a><span>⭐️ 开发工具</span></h3><ul><li><span>💬 描述：工欲善其事，必先利其器。</span></li></ul><h4><a name="浏览器" class="md-header-anchor"></a><span>浏览器</span></h4><ul><li><span>⭐️ Chrome</span></li><li><span>✅ Edge</span></li><li><span>✅ Firefox</span></li><li><span>❌ Opera</span></li><li><span>Safari</span></li></ul><h4><a name="编辑器" class="md-header-anchor"></a><span>编辑器</span></h4><ul><li><span>⭐️ VSCode</span></li><li><span>✅ WebStorm</span></li><li><span>Atom</span></li><li><span>⭐️ Sublime Text</span></li><li><span>HBuilder X</span></li><li><span>记事本</span></li><li><span>在线 IDE</span></li></ul><h4><a name="文档笔记" class="md-header-anchor"></a><span>文档笔记</span></h4><ul><li><p><span>✅ Markdown 语法</span></p></li><li><p><span>✅ Typora</span></p></li><li><p><span>在线笔记</span></p><ul><li><span>语雀</span></li><li><span>腾讯文档</span></li><li><span>石墨文档</span></li><li><span>印象笔记</span></li></ul></li><li><p><span>Mdnice</span></p></li></ul><h3><a name="⭐️-html" class="md-header-anchor"></a><span>⭐️ HTML</span></h3><ul><li><p><span>💬 描述：用于定义一个网页结构的基本技术。</span></p></li><li><p><span>📚 资源：</span><a href='https://developer.mozilla.org/zh-CN/docs/Learn/HTML'><span>https://developer.mozilla.org/zh-CN/docs/Learn/HTML(opens new window)</span></a></p></li><li><p><span>⭐️ 基本语法</span></p></li><li><p><span>⭐️ 标签</span></p><ul><li><span>分区 div</span></li><li><span>标题 h1 ~ h6</span></li><li><span>段落 p</span></li><li><span>图像 img</span></li><li><span>列表 ul / ol</span></li><li><span>超链接 a</span></li><li><span>表单 form</span></li><li><span>表格 table</span></li><li><span>框架 iframe</span></li></ul></li><li><p><span>⭐️ 属性</span></p></li><li><p><span>✅ HTML5 特性</span></p><ul><li><p><span>语义化标签</span></p></li><li><p><span>浏览器支持</span></p></li><li><p><span>多媒体标签</span></p></li><li><p><span>Canvas 画布</span></p></li><li><p><span>❌ 内联 SVG</span></p></li><li><p><span>本地存储</span></p><ul><li><span>localStorage</span></li><li><span>sessionStorage</span></li><li><span>❌ Web SQL</span></li></ul></li><li><p><span>Web Workers</span></p></li><li><p><span>应用缓存（Cache Manifest）</span></p></li><li><p><span>无障碍</span></p></li></ul></li></ul><h3><a name="⭐️-css" class="md-header-anchor"></a><span>⭐️ CSS</span></h3><ul><li><p><span>💬 描述：层叠样式表，用于设计风格和布局。</span></p></li><li><p><span>📚 资源：</span><a href='https://developer.mozilla.org/zh-CN/docs/Learn/CSS'><span>https://developer.mozilla.org/zh-CN/docs/Learn/CSS(opens new window)</span></a></p></li><li><p><span>⭐️ 基本语法</span></p></li><li><p><span>⭐️ 引入方式</span></p><ul><li><span>行内样式</span></li><li><span>内部样式表</span></li><li><span>外部样式表</span></li></ul></li><li><p><span>⭐️ 选择器</span></p><ul><li><p><span>通用选择器</span></p></li><li><p><span>标签选择器</span></p></li><li><p><span>id 选择器</span></p></li><li><p><span>class 选择器</span></p></li><li><p><span>属性选择器</span></p></li><li><p><span>派生选择器</span></p><ul><li><span>后代选择器</span></li><li><span>子元素选择器</span></li><li><span>相邻兄弟选择器</span></li></ul></li><li><p><span>组合选择器</span></p></li><li><p><span>伪选择器</span></p></li><li><p><span>选择器优先级</span></p></li></ul></li><li><p><span>⭐️ 属性</span></p><ul><li><p><span>单位</span></p><ul><li><span>px</span></li><li><span>em</span></li><li><span>rem</span></li><li><span>vw</span></li><li><span>vh</span></li></ul></li><li><p><span>背景</span></p></li><li><p><span>文本</span></p></li><li><p><span>字体</span></p></li><li><p><span>列表</span></p></li><li><p><span>表格</span></p></li></ul></li><li><p><span>⭐️ 文档流</span></p><ul><li><span>标准流</span></li><li><span>浮动流</span></li><li><span>定位流</span></li></ul></li><li><p><span>⭐️ 内联元素 / 块状元素</span></p></li><li><p><span>⭐️ 盒子模型</span></p><ul><li><span>content</span></li><li><span>padding</span></li><li><span>border</span></li><li><span>margin</span></li></ul></li><li><p><span>⭐️ 浮动</span></p><ul><li><span>设置浮动 float</span></li><li><span>清除浮动 clear</span></li></ul></li><li><p><span>⭐️ 定位</span></p><ul><li><span>static</span></li><li><span>absolute</span></li><li><span>fixed</span></li><li><span>relative</span></li><li><span>sticky</span></li></ul></li><li><p><span>⭐️ 层叠规则</span></p></li><li><p><span>❗ BFC 和 IFC 机制</span></p></li><li><p><span>CSS3</span></p><ul><li><p><span>⭐️ 响应式布局</span></p><ul><li><span>媒体查询</span></li><li><span>Flex 布局</span></li><li><span>Grid 布局</span></li><li><span>瀑布流</span></li></ul></li><li><p><span>动画</span></p></li><li><p><span>过渡</span></p></li><li><p><span>渐变</span></p></li><li><p><span>背景</span></p></li><li><p><span>边框</span></p></li><li><p><span>圆角</span></p></li><li><p><span>字体</span></p></li><li><p><span>2D / 3D 转换</span></p></li></ul></li></ul><h3><a name="⭐️-javascript" class="md-header-anchor"></a><span>⭐️ JavaScript</span></h3><ul><li><p><span>💬 描述：具有函数优先的轻量级，解释型或即时编译型的编程语言。</span></p></li><li><p><span>📚 资源：</span><a href='https://developer.mozilla.org/zh-CN/docs/Web/JavaScript'><span>https://developer.mozilla.org/zh-CN/docs/Web/JavaScript(opens new window)</span></a></p></li><li><p><span>⭐️ 基本语法</span></p></li><li><p><span>⭐️ 数据类型</span></p><ul><li><p><span>值类型</span></p><ul><li><span>字符串 String</span></li><li><span>数组 Number</span></li><li><span>布尔 Boolean</span></li><li><span>空值 Null</span></li><li><span>未定义 Undefined</span></li><li><span>Symbol</span></li></ul></li><li><p><span>引用类型</span></p><ul><li><span>对象 Object</span></li><li><span>数组 Array</span></li><li><span>函数 Function</span></li></ul></li></ul></li><li><p><span>✅ 数据类型转换</span></p></li><li><p><span>✅ 函数</span></p><ul><li><p><span>⭐️ 概念</span></p></li><li><p><span>⭐️ 自定义函数</span></p></li><li><p><span>调用方式</span></p><ul><li><span>⭐️ 全局调用</span></li><li><span>构造函数调用</span></li><li><span>⭐️ 函数方法调用</span></li><li><span>apply</span></li><li><span>call</span></li></ul></li><li><p><span>✅❗ 闭包</span></p></li></ul></li><li><p><span>✅ 对象</span></p><ul><li><p><span>概念</span></p></li><li><p><span>this</span></p></li><li><p><span>原型链和继承</span></p></li><li><p><span>常用对象</span></p><ul><li><span>数字 Number</span></li><li><span>字符串 String 对象</span></li><li><span>日期 Date 对象</span></li><li><span>数组 Array</span></li><li><span>布尔 Boolean</span></li><li><span>算数 Math</span></li></ul></li><li><p><span>自定义对象</span></p></li></ul></li><li><p><span>✅❗ 作用域（作用域链）</span></p></li><li><p><span>✅ BOM API</span></p></li><li><p><span>⭐️ DOM API</span></p></li><li><p><span>⭐️ JSON</span></p></li><li><p><span>⭐️ Ajax</span></p></li><li><p><span>✅ JavaScript 执行机制</span></p></li></ul><h4><a name="es6-特性" class="md-header-anchor"></a><span> ES6+ 特性</span></h4><ul><li><span>💬 描述：新引入的 JavaScript 语法特性。</span></li><li><span>📚 资源：ES6 入门教程 </span><a href='https://es6.ruanyifeng.com/'><span>https://es6.ruanyifeng.com/(opens new window)</span></a></li><li><span>let 和 const</span></li><li><span>变量解构赋值</span></li><li><span>对象扩展和新增方法</span></li><li><span>Symbol</span></li><li><span>Set 和 Map 数据结构</span></li><li><span>⭐️❗ Promise &amp; async / await 异步编程</span></li><li><span>Generator 函数异步编程</span></li></ul><h2><a name="二巩固基础" class="md-header-anchor"></a><span>二、巩固基础</span></h2><ul><li><p><span>💬 描述：学习前端、计算机、软件开发相关基础知识，并复习巩固上阶段学到的前端三件套。</span></p></li><li><p><span>📚 资源</span></p><ul><li><span>《JavaScript 高级程序设计》：</span><a href='https://t.zsxq.com/0eKWGbTgL'><span>https://t.zsxq.com/0eKWGbTgL(opens new window)</span></a></li><li><span>《JavaScript 忍者秘籍》：</span><a href='https://www.code-nav.cn/rd/?rid=28ee4e3e606b16c00e3c5b18609e3dc2'><span>https://www.code-nav.cn/rd/?rid=28ee4e3e606b16c00e3c5b18609e3dc2(opens new window)</span></a></li></ul></li><li><p><span>🎯 目标：熟悉前端三件套语法，尤其是 JavaScript，并了解互联网、域名、浏览器、服务器等，扎实前端程序员的基本功，为下面进入实战开发做准备。</span></p></li></ul><h3><a name="前端基础知识" class="md-header-anchor"></a><span>前端基础知识</span></h3><ul><li><p><span>✅ 互联网</span></p></li><li><p><span>⭐️ 域名</span></p></li><li><p><span>⭐️ DNS</span></p></li><li><p><span>⭐️ 服务器</span></p></li><li><p><span>✅ 浏览器</span></p><ul><li><span>浏览器 DOM 事件流 / 事件委托</span></li><li><span>⭐️ 浏览器加载顺序</span></li><li><span>⭐️ 浏览器渲染过程</span></li><li><span>浏览器事件循环</span></li><li><span>浏览器同源策略</span></li><li><span>❗ 跨域解决方案</span></li><li><span>浏览器缓存</span></li><li><span>控制台调试技巧</span></li></ul></li><li><p><span>✅ HTTP</span></p><ul><li><p><span>❗ HTTP 请求过程</span></p></li><li><p><span>常见 HTTP 协议</span></p><ul><li><span>HTTP 1.0</span></li><li><span>⭐️ HTTP 1.1</span></li><li><span>HTTP 2</span></li><li><span>HTTP 3</span></li></ul></li><li><p><span>⭐️ HTTP 请求类别</span></p></li><li><p><span>⭐️ 常见状态码</span></p><ul><li><span>1xx 信息</span></li><li><span>2xx 成功</span></li><li><span>3xx 重定向</span></li><li><span>4xx 客户端错误</span></li><li><span>5xx 服务器错误</span></li></ul></li><li><p><span>WebSocket</span></p></li><li><p><span>⭐️ Cookie</span></p></li><li><p><span>Session</span></p></li><li><p><span>⭐️ HTTPS</span></p></li></ul></li></ul><h3><a name="计算机基础" class="md-header-anchor"></a><span>计算机基础</span></h3><h4><a name="算法和数据结构" class="md-header-anchor"></a><span> 算法和数据结构</span></h4><ul><li><p><span>⭐️ 时间 / 空间复杂度分析</span></p></li><li><p><span>数据结构</span></p><ul><li><span>数组</span></li><li><span>字符串</span></li><li><span>队列</span></li><li><span>栈</span></li><li><span>链表</span></li><li><span>集合</span></li><li><span>哈希表</span></li><li><span>二叉树</span></li></ul></li><li><p><span>算法</span></p><ul><li><span>排序</span></li><li><span>双指针</span></li><li><span>查找</span></li><li><span>分治</span></li><li><span>动态规划</span></li><li><span>递归</span></li><li><span>回溯</span></li><li><span>贪心</span></li><li><span>位运算</span></li><li><span>DFS</span></li><li><span>BFS</span></li><li><span>图</span></li></ul></li></ul><h4><a name="计算机网络" class="md-header-anchor"></a><span>计算机网络</span></h4><ul><li><span>HTTP 协议</span></li><li><span>网络模型</span></li><li><span>UDP / TCP 协议</span></li></ul><h4><a name="操作系统" class="md-header-anchor"></a><span>操作系统</span></h4><ul><li><span>进程、线程</span></li><li><span>进程 / 线程间通讯方式</span></li><li><span>进程调度算法</span></li><li><span>进程 / 线程状态</span></li><li><span>死锁</span></li><li><span>内存管理</span></li></ul><h3><a name="软件开发基础" class="md-header-anchor"></a><span>软件开发基础</span></h3><h4><a name="设计模式" class="md-header-anchor"></a><span>设计模式</span></h4><ul><li><span>单例模式</span></li><li><span>代理模式</span></li><li><span>工厂模式</span></li><li><span>装饰者模式</span></li><li><span>观察者模式</span></li><li><span>策略模式</span></li><li><span>门面模式</span></li></ul><h4><a name="git-版本控制" class="md-header-anchor"></a><span> Git 版本控制</span></h4><ul><li><span>常用命令</span></li></ul><h4><a name="linux-服务器" class="md-header-anchor"></a><span> Linux 服务器</span></h4><ul><li><span>常用命令</span></li></ul><h4><a name="正则表达式" class="md-header-anchor"></a><span>正则表达式</span></h4><h2><a name="三前端工程化" class="md-header-anchor"></a><span>三、前端工程化</span></h2><ul><li><p><span>💬 描述：前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高开发过程中的开发效率，减少不必要的重复工作时间。</span></p></li><li><p><span>📚 资源</span></p><ul><li><span>什么是前端工程化？</span><a href='https://www.zhihu.com/question/433854153/answer/1713597311'><span>https://www.zhihu.com/question/433854153/answer/1713597311(opens new window)</span></a></li></ul></li><li><p><span>🎯 目标：至少学会一门主流的前端开发框架（Vue / React），并配合脚手架、组件库、工具等从 0 开始独立搭建并开发一个完整的前端网站，可以试着仿一些知名站点。要求遵循企业开发规范，将项目代码提交到代码仓库中，并独立发布上线，供他人访问。此外，建议抓住机会参与一些团队项目，感受团队开发模式和前端工程化的优势。</span></p></li></ul><h3><a name="研发流程" class="md-header-anchor"></a><span> 研发流程</span></h3><ol><li><span>技术选型</span></li><li><span>初始化</span></li><li><span>开发</span></li><li><span>本地测试</span></li><li><span>代码提交</span></li><li><span>编译、打包、构建</span></li><li><span>部署</span></li><li><span>集成测试</span></li><li><span>发布上线</span></li><li><span>监控运维</span></li></ol><h3><a name="代码托管" class="md-header-anchor"></a><span> 代码托管</span></h3><ul><li><span>💬 描述：集中存储、备份你的代码，还能和团队成员协作开发。</span></li><li><span>⭐️ GitHub</span></li><li><span>Gitee</span></li><li><span>GitLab</span></li></ul><h3><a name="nodejs" class="md-header-anchor"></a><span> Node.JS</span></h3><ul><li><p><span>💬 描述：一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具！</span></p></li><li><p><span>📚 资源</span></p><ul><li><span>Node.js 官方教程：</span><a href='http://nodejs.cn/learn'><span>http://nodejs.cn/learn(opens new window)</span></a></li><li><span>Node.js 入门：</span><a href='https://cnodejs.org/getstart'><span>https://cnodejs.org/getstart(opens new window)</span></a></li></ul></li></ul><h4><a name="包管理" class="md-header-anchor"></a><span> 包管理</span></h4><ul><li><span>💬 描述：用于安装 Node.js 的扩展、工具等。</span></li><li><span>⭐️ npm</span></li><li><span>⭐️ yarn</span></li><li><span>❌ bower</span></li><li><span>✅ npx</span></li></ul><h4><a name="开发框架" class="md-header-anchor"></a><span>开发框架</span></h4><ul><li><span>Express</span></li><li><span>Koa</span></li><li><span>Egg</span></li></ul><h3><a name="开发框架-n1709" class="md-header-anchor"></a><span>开发框架</span></h3><ul><li><span>💬 描述：解决特定的问题,提高</span><em><span>开发</span></em><span>效率、简化我们的代码复杂度。</span></li></ul><h4><a name="css-框架" class="md-header-anchor"></a><span> CSS 框架</span></h4><ul><li><span>✅ BootStrap</span></li><li><span>⭐️ Tailwind CSS</span></li></ul><h4><a name="javascript-框架" class="md-header-anchor"></a><span> JavaScript 框架</span></h4><h5><a name="vue" class="md-header-anchor"></a><span> Vue</span></h5><ul><li><span>Vue Router</span></li><li><span>Vuex</span></li></ul><h5><a name="react" class="md-header-anchor"></a><span> React</span></h5><ul><li><span>React DOM</span></li><li><span>React Router</span></li><li><span>Redux</span></li><li><span>MobX</span></li><li><span>React Hooks</span></li></ul><h5><a name="angular" class="md-header-anchor"></a><span> Angular</span></h5><ul><li><span>RxJS</span></li><li><span>NgRx</span></li></ul><h5><a name="svelte" class="md-header-anchor"></a><span> Svelte</span></h5><h5><a name="umijs" class="md-header-anchor"></a><span> UmiJS</span></h5><h3><a name="封装库" class="md-header-anchor"></a><span>封装库</span></h3><h4><a name="组件库" class="md-header-anchor"></a><span>组件库</span></h4><ul><li><span>✅ LayUI</span></li><li><span>⭐️ ElementUI（Vue）</span></li><li><span>✅ VantUI（Vue）</span></li><li><span>⭐️ Ant Design（React）</span></li><li><span>Material UI</span></li></ul><h4><a name="数据可视化" class="md-header-anchor"></a><span>数据可视化</span></h4><ul><li><span>✅ AntV</span></li><li><span>Apache ECharts</span></li><li><span>HighCharts</span></li><li><span>D3.js</span></li></ul><h4><a name="组件插件）" class="md-header-anchor"></a><span>组件（插件）</span></h4><ul><li><span>富文本编辑器</span></li><li><span>弹窗</span></li><li><span>轮播图</span></li></ul><h4><a name="工具库" class="md-header-anchor"></a><span>工具库</span></h4><ul><li><span>✅ jQuery</span></li><li><span>✅ Lodash</span></li><li><span>✅ Axios</span></li><li><span>时间处理 Moment.js</span></li></ul><h4><a name="动效库" class="md-header-anchor"></a><span>动效库</span></h4><ul><li><span>✅ Animate.css</span></li><li><span>Ant Motion</span></li></ul><h4><a name="字体图标库" class="md-header-anchor"></a><span>字体图标库</span></h4><ul><li><span>⭐️ IconFont</span></li><li><span>IconPark</span></li><li><span>Font Awesome</span></li></ul><h3><a name="⭐️-脚手架" class="md-header-anchor"></a><span>⭐️ 脚手架</span></h3><ul><li><span>💬 描述：快速生成新项目的目录模板，提升开发效率和开发舒适性。</span></li><li><span>📚 资源：</span><a href='https://www.jianshu.com/p/25ce8cf2e6a7'><span>https://www.jianshu.com/p/25ce8cf2e6a7(opens new window)</span></a></li><li><span>Vue CLI</span></li><li><span>create-react-app</span></li><li><span>✅ Yeoman</span></li></ul><h3><a name="前端架构设计" class="md-header-anchor"></a><span> 前端架构设计</span></h3><ul><li><span>💬 描述：一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效可持续的工作流。</span></li><li><span>模块化</span></li><li><span>组件化</span></li><li><span>✅ MVVM</span></li><li><span>设计原则</span></li><li><span>⭐️ SPA 单页应用</span></li><li><span>⭐️ 多页应用</span></li><li><span>✅ 前端路由</span></li><li><span>PWA</span></li><li><span>有损服务</span></li></ul><h4><a name="服务端渲染" class="md-header-anchor"></a><span> 服务端渲染</span></h4><ul><li><span>💬 描述：在服务端渲染 HTML 页面的模式。</span></li><li><span>📚 资源：</span><a href='https://www.zhihu.com/question/379563505'><span>https://www.zhihu.com/question/379563505(opens new window)</span></a></li><li><span>Next.js（React）</span></li><li><span>Nuxt.js（Vue）</span></li><li><span>❌ Universal（Angular）</span></li></ul><h4><a name="bff" class="md-header-anchor"></a><span>BFF</span></h4><ul><li><span>💬 描述：Backend For Frontend（服务于前端的后端），就是服务器设计 API 时会考虑前端的使用，并在服务端直接进行业务逻辑的处理。</span></li><li><span>📚 资源：</span><a href='https://www.jianshu.com/p/eb1875c62ad3'><span>https://www.jianshu.com/p/eb1875c62ad3(opens new window)</span></a></li><li><span>GraphQL</span></li></ul><h4><a name="微前端" class="md-header-anchor"></a><span>微前端</span></h4><ul><li><span>💬 描述：将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，从而解决庞大的一整块后端服务带来的变更与扩展方面的限制。</span></li><li><span>📚 资源：</span><a href='https://zhuanlan.zhihu.com/p/96464401'><span>https://zhuanlan.zhihu.com/p/96464401(opens new window)</span></a></li><li><span>qiankun</span></li><li><span>single-spa</span></li></ul><h3><a name="css-in-js" class="md-header-anchor"></a><span>CSS in JS</span></h3><ul><li><span>💬 描述：用 JavaScript 来写 CSS。</span></li><li><span>📚 资源：</span><a href='http://www.ruanyifeng.com/blog/2017/04/css_in_js.html'><span>http://www.ruanyifeng.com/blog/2017/04/css_in_js.html(opens new window)</span></a></li><li><span>内联样式</span></li><li><span>声明样式</span></li><li><span>引入样式</span></li></ul><h4><a name="css-模块化" class="md-header-anchor"></a><span> CSS 模块化</span></h4><ul><li><span>⭐️ CSS Modules</span></li><li><span>✅ styled-components</span></li><li><span>✅ Styled JSX</span></li><li><span>Emotion</span></li></ul><h3><a name="开发调试" class="md-header-anchor"></a><span>开发调试</span></h3><ul><li><span>💬 描述：本地开发时热更新，提升开发效率。</span></li><li><span>webpack-dev-server</span></li><li><span>serve</span></li></ul><h4><a name="内网穿透" class="md-header-anchor"></a><span>内网穿透</span></h4><ul><li><span>💬 描述：将内网外网通过 nat 隧道打通，让内网的网站、数据让外网可以访问。</span></li><li><span>Ngrok</span></li><li><span>NATAPP</span></li></ul><h3><a name="css-预编译" class="md-header-anchor"></a><span> CSS 预编译</span></h3><ul><li><span>💬 描述：使用新的扩展语言以增强 CSS 的能力，并通过预编译的方式将其转换为浏览器认识的 CSS 代码。</span></li><li><span>⭐️ SASS</span></li><li><span>✅ PostCSS</span></li><li><span>Stylus</span></li><li><span>❌ LESS</span></li></ul><h3><a name="测试" class="md-header-anchor"></a><span>测试</span></h3><h4><a name="测试分类" class="md-header-anchor"></a><span>测试分类</span></h4><ul><li><span>⭐️ UT 单元测试</span></li><li><span>SIT 系统集成测试</span></li><li><span>E2E 端到端测试</span></li><li><span>UAT 用户验收测试</span></li></ul><h4><a name="mock" class="md-header-anchor"></a><span>Mock</span></h4><ul><li><span>💬 描述：通过随机数据，模拟各种场景，增加单元测试的真实性。</span></li><li><span>Mock.js</span></li></ul><h4><a name="测试框架" class="md-header-anchor"></a><span>测试框架</span></h4><ul><li><span>✅ Jest</span></li><li><span>Enzyme</span></li><li><span>✅ Puppeteer（Headless Browser）</span></li><li><span>Mocha</span></li><li><span>Jasmine</span></li></ul><h3><a name="代码质量" class="md-header-anchor"></a><span> 代码质量</span></h3><h4><a name="开发规范" class="md-header-anchor"></a><span>开发规范</span></h4><ul><li><span>💬 描述：依照规范写出的代码会更加合理。</span></li><li><span>📚 资源：Airbnb 代码规范 </span><a href='https://github.com/BingKui/javascript-zh'><span>https://github.com/BingKui/javascript-zh(opens new window)</span></a></li><li><span>CSS Style Guide</span></li><li><span>JavaScript Style Guide</span></li></ul><h4><a name="类型校验" class="md-header-anchor"></a><span>类型校验</span></h4><ul><li><span>TypeScript</span></li></ul><h4><a name="代码检查" class="md-header-anchor"></a><span>代码检查</span></h4><ul><li><span>ESLint</span></li><li><span>StyleLint</span></li></ul><h4><a name="代码风格" class="md-header-anchor"></a><span>代码风格</span></h4><ul><li><span>💬 描述：根据配置自动格式化代码，统一格式。</span></li><li><span>Prettier</span></li></ul><h4><a name="提交规范" class="md-header-anchor"></a><span>提交规范</span></h4><ul><li><span>约定式提交</span></li></ul><h4><a name="提交检查" class="md-header-anchor"></a><span>提交检查</span></h4><ul><li><span>💬 描述：在提交代码时触发一些操作，比如检查代码的风格等。</span></li><li><span>pre-commit</span></li><li><span>husky</span></li></ul><h3><a name="构建工具" class="md-header-anchor"></a><span>构建工具</span></h3><h4><a name="自动化构建" class="md-header-anchor"></a><span>自动化构建</span></h4><ul><li><span>💬 描述：按照配置好的流程自动打包构建项目，提高团队的开发效率，降低项目的维护难度。</span></li><li><span>Gulp</span></li><li><span>✅ npm script</span></li><li><span>Grunt</span></li></ul><h4><a name="打包工具" class="md-header-anchor"></a><span>打包工具</span></h4><ul><li><span>💬 描述：将各种零散的📚 资源文件打包为可在浏览器等环境运行的代码。</span></li><li><span>⭐️ Webpack</span></li><li><span>✅ Rollup</span></li><li><span>✅ Vite</span></li><li><span>Parcel</span></li><li><span>Snowpack</span></li></ul><h3><a name="ci--cd" class="md-header-anchor"></a><span>CI / CD</span></h3><ul><li><span>💬 描述：通过在应用开发阶段引入自动化来频繁向客户交付应用。</span></li><li><span>GitLab CI</span></li><li><span>✅ Jenkins</span></li></ul><h3><a name="部署" class="md-header-anchor"></a><span>部署</span></h3><h4><a name="web-服务器" class="md-header-anchor"></a><span>Web 服务器</span></h4><h5><a name="nginx" class="md-header-anchor"></a><span>Nginx</span></h5><ul><li><span>💬 描述：高性能的 HTTP 和反向代理 web 服务器。</span></li><li><span>📚 资源：腾讯云动手实验室 </span><a href='https://cloud.tencent.com/developer/labs/gallery'><span>https://cloud.tencent.com/developer/labs/gallery(opens new window)</span></a></li><li><span>反向代理</span></li><li><span>解决跨域</span></li><li><span>改写请求</span></li></ul><h5><a name="apache" class="md-header-anchor"></a><span> Apache</span></h5><h4><a name="容器" class="md-header-anchor"></a><span>容器</span></h4><h5><a name="docker" class="md-header-anchor"></a><span> Docker</span></h5><ul><li><span>💬 描述：容器是一个标准化的软件单元，它将代码及其所有依赖关系打包，以便应用程序从一个计算环境可靠快速地运行到另一个计算环境。Docker容器镜像是一个轻量的独立的可执行的软件包。包含程序运行的时候所需的一切：代码，运行时间，系统工具，系统库和设置。</span></li><li><span>📚 资源：Docker 从入门到实践 </span><a href='https://vuepress.mirror.docker-practice.com/'><span>https://vuepress.mirror.docker-practice.com/(opens new window)</span></a></li><li><span>Dockerfile</span></li></ul><h5><a name="kubernetes" class="md-header-anchor"></a><span>Kubernetes</span></h5><h4><a name="部署策略" class="md-header-anchor"></a><span>部署策略</span></h4><ul><li><span>全量发布</span></li><li><span>蓝绿部署</span></li><li><span>滚动发布</span></li><li><span>灰度发布</span></li></ul><h3><a name="监控告警" class="md-header-anchor"></a><span>监控告警</span></h3><ul><li><span>前端埋点</span></li><li><span>错误监控</span></li><li><span>性能监控</span></li><li><span>行为监控</span></li></ul><h2><a name="四前端优化" class="md-header-anchor"></a><span>四、前端优化</span></h2><ul><li><span>💬 描述：通过分析和优化手段，提高网站的性能和用户体验。</span></li><li><span>🎯 目标：实践前端优化方法，从多个方面优化自己做过的项目，最好能将优化后的网站与原网站进行对比，得到一些数据和体验上的明显提升。</span></li></ul><h3><a name="✅-性能优化" class="md-header-anchor"></a><span>✅ 性能优化</span></h3><h4><a name="性能指标" class="md-header-anchor"></a><span>性能指标</span></h4><ul><li><p><span>💬 描述：用于衡量一个 Web 页面的性能。</span></p></li><li><p><span>📚 资源：</span><a href='https://juejin.cn/post/6844904153869713416'><span>https://juejin.cn/post/6844904153869713416(opens new window)</span></a></p></li><li><p><span>FP（First Paint）</span></p><ul><li><span>💬 描述：从开始加载到浏览器首次绘制像素到屏幕上的时间，也就是页面在屏幕上首次发生视觉变化的时间。</span></li></ul></li><li><p><span>FCP（First Contentful Paint）</span></p><ul><li><span>💬 描述：浏览器首次绘制来自 DOM 的内容的时间。</span></li></ul></li><li><p><span>FMP（First Meaningful Paint）</span></p><ul><li><span>💬 描述：页面的主要内容绘制到屏幕上的时间。</span></li></ul></li><li><p><span>FSP（First Screen Paint）</span></p><ul><li><span>💬 描述：页面从开始加载到首屏内容全部绘制完成的时间，用户可以看到首屏的全部内容。</span></li></ul></li><li><p><span>TTI（Time to Interactive）</span></p><ul><li><span>💬 描述：表示网页第一次完全达到可交互状态的时间点，浏览器已经可以持续性的响应用户的输入。</span></li></ul></li></ul><h4><a name="优化手段" class="md-header-anchor"></a><span>优化手段</span></h4><ul><li><p><span>性能监控</span></p><ul><li><span>Performance API</span></li></ul></li><li><p><span>样式优化</span></p></li><li><p><span>JavaScript 优化</span></p><ul><li><span>防抖</span></li><li><span>节流</span></li></ul></li><li><p><span>代码分割</span></p></li><li><p><span>📚 资源压缩</span></p></li><li><p><span>打包优化</span></p></li><li><p><span>服务器优化</span></p></li><li><p><span>缓存优化</span></p><ul><li><span>Service Worker</span></li></ul></li><li><p><span>动画性能</span></p></li><li><p><span>dns-prefetch</span></p></li><li><p><span>Lazy loading</span></p></li><li><p><span>优化启动性能</span></p><ul><li><span>异步化</span></li></ul></li><li><p><span>渲染优化</span></p></li><li><p><span>网络优化</span></p></li><li><p><span>移动端性能优化</span></p></li><li><p><span>✅ CDN</span></p><ul><li><span>💬 描述：内容分发网络，是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。</span></li><li><span>📚 资源：BootCDN </span><a href='https://www.bootcdn.cn/'><span>https://www.bootcdn.cn/(opens new window)</span></a></li></ul></li></ul><h3><a name="用户体验" class="md-header-anchor"></a><span>用户体验</span></h3><ul><li><span>设计系统</span></li><li><span>骨架屏</span></li></ul><h3><a name="✅-兼容性" class="md-header-anchor"></a><span>✅ 兼容性</span></h3><h4><a name="浏览器兼容性" class="md-header-anchor"></a><span>浏览器兼容性</span></h4><ul><li><span>normalize.css</span></li><li><span>html5shiv.js</span></li><li><span>respond.js</span></li><li><span>Babel</span></li><li><span>Polyfill</span></li></ul><h4><a name="屏幕分辨率兼容性" class="md-header-anchor"></a><span>屏幕分辨率兼容性</span></h4><h4><a name="跨平台兼容性" class="md-header-anchor"></a><span>跨平台兼容性</span></h4><h3><a name="seo" class="md-header-anchor"></a><span>SEO</span></h3><ul><li><span>💬 描述：搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。</span></li><li><span>📚 资源：百度搜索📚 资源平台 </span><a href='https://ziyuan.baidu.com/cooperateresource/index'><span>https://ziyuan.baidu.com/cooperateresource/index(opens new window)</span></a></li><li><span>robots.txt</span></li><li><span>description</span></li><li><span>keywords</span></li><li><span>SiteMap</span></li><li><span>HTML 标签优化</span></li><li><span>站内链接建设</span></li><li><span>友情链接</span></li></ul><h3><a name="✅-安全" class="md-header-anchor"></a><span>✅ 安全</span></h3><ul><li><span>⭐️ XSS</span></li><li><span>CSRF</span></li><li><span>反爬虫</span></li><li><span>SQL 注入</span></li><li><span>DDoS</span></li></ul><h2><a name="五前端生态" class="md-header-anchor"></a><span>五、前端生态</span></h2><ul><li><span>💬 描述：如今，前端领域的范围越来越广，出现了更多前端工程师需要了解和关注的技术。</span></li><li><span>🎯 目标：能用学到的前端技术去做更多的事情，比如开发个人博客、文档网站、小程序、APP 等。</span></li></ul><h3><a name="静态站点构建" class="md-header-anchor"></a><span>静态站点构建</span></h3><h4><a name="开发" class="md-header-anchor"></a><span>开发</span></h4><ul><li><span>React Static</span></li></ul><h4><a name="博客" class="md-header-anchor"></a><span>博客</span></h4><ul><li><span>✅ Gatsby.js</span></li><li><span>✅ Docusaurus</span></li><li><span>Hugo</span></li><li><span>Hexo</span></li></ul><h4><a name="文档" class="md-header-anchor"></a><span>文档</span></h4><ul><li><span>JekyII</span></li><li><span>⭐️ Docsify</span></li><li><span>VuePress</span></li><li><span>✅ Dumi</span></li></ul><h3><a name="大前端" class="md-header-anchor"></a><span> 大前端</span></h3><p><span>💬 描述：前端技术的融合更加紧密，应用的领域也更加广泛，前端领域的内容呈现多样化，除了网站外，还可以用前端技术跨平台开发 Android、iOS、小程序、虚拟现实、增强现实等。</span></p><h4><a name="移动应用" class="md-header-anchor"></a><span>移动应用</span></h4><ul><li><span>Hybrid</span></li><li><span>WebView</span></li><li><span>React Native</span></li><li><span>Flutter</span></li></ul><h4><a name="移动应用打包" class="md-header-anchor"></a><span>移动应用打包</span></h4><ul><li><span>Weex</span></li><li><span>Cordova</span></li><li><span>Phonegap</span></li><li><span>Ionic</span></li></ul><h4><a name="桌面应用" class="md-header-anchor"></a><span>桌面应用</span></h4><ul><li><span>Electron</span></li><li><span>NW.js</span></li><li><span>Proton Native</span></li></ul><h4><a name="小程序" class="md-header-anchor"></a><span>小程序</span></h4><ul><li><span>原生</span></li><li><span>WebView</span></li></ul><h4><a name="跨端开发框架" class="md-header-anchor"></a><span>跨端开发框架</span></h4><ul><li><span>✅ uni-app</span></li><li><span>✅ Taro</span></li><li><span>Flutter</span></li><li><span>Chameleon</span></li><li><span>Wepy</span></li><li><span>Rax</span></li></ul><h4><a name="移动端调试" class="md-header-anchor"></a><span>移动端调试</span></h4><ul><li><span>Chrome Dev Tools</span></li><li><span>Android Simulator</span></li><li><span>IOS Simulator</span></li></ul><h3><a name="serverless" class="md-header-anchor"></a><span> Serverless</span></h3><ul><li><span>💬 描述：一种构建和管理基于微服务架构的完整流程，允许你在服务部署级别而不是服务器部署级别来管理你的应用部署，你甚至可以管理某个具体功能或端口的部署，这就能让开发者快速迭代，更快速地开发软件。</span></li></ul><h3><a name="云开发" class="md-header-anchor"></a><span>云开发</span></h3><ul><li><span>💬 描述：云端一体化的后端云服务 ，采用 Serverless 架构，免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具（CLI）、Flutter SDK 等能力降低了应用开发的门槛。使用云开发可以构建完整的小程序/小游戏、H5、Web、移动 App 等应用。</span></li><li><span>✅ 腾讯云云开发</span></li><li><span>阿里云云开发</span></li></ul><h3><a name="低代码" class="md-header-anchor"></a><span>低代码</span></h3><ul><li><span>💬 描述：无需编码（零代码）或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。</span></li><li><span>腾讯云低码</span></li><li><span>阿里宜搭</span></li></ul><h2><a name="六前端求职" class="md-header-anchor"></a><span>六、前端求职</span></h2><ul><li><span>💬 描述：求职是一个漫长的过程，建议拉长战线，尽早准备。</span></li><li><span>🎯 目标：找到理想的工作。</span></li></ul><h3><a name="简历" class="md-header-anchor"></a><span>简历</span></h3><ul><li><span>老鱼简历：</span><a href='https://laoyujianli.com/'><span>https://laoyujianli.com/ (opens new window)</span></a><span>（1 分钟帮你生成精美的个人简历）</span></li></ul><h3><a name="面试题库" class="md-header-anchor"></a><span>面试题库</span></h3><ul><li><span>编程导航精选面试题汇总：</span><a href='https://yuyuanweb.feishu.cn/wiki/CmFywXs0Oi0MS9kU3yocJugFn2e'><span>https://yuyuanweb.feishu.cn/wiki/CmFywXs0Oi0MS9kU3yocJugFn2e(opens new window)</span></a></li><li><span>前端面试每日 3+1：</span><a href='https://github.com/haizlin/fe-interview'><span>https://github.com/haizlin/fe-interview(opens new window)</span></a></li><li><span>React 面试题目 &amp; 题解：</span><a href='https://github.com/sudheerj/reactjs-interview-questions'><span>https://github.com/sudheerj/reactjs-interview-questions(opens new window)</span></a></li></ul><h3><a name="面经" class="md-header-anchor"></a><span>面经</span></h3><ul><li><span>编程导航面经汇总：</span><a href='https://yuyuanweb.feishu.cn/wiki/PLHrwcEPCiJcxXk7Ki4csRoJn2f'><span>https://yuyuanweb.feishu.cn/wiki/PLHrwcEPCiJcxXk7Ki4csRoJn2f(opens new window)</span></a></li></ul><h2><a name="七前端未来" class="md-header-anchor"></a><span>七、前端未来</span></h2><ul><li><span>💬 描述：前端未来可能的发展趋势和热门技术。</span></li><li><span>🎯 目标：关注前沿，持续进步。</span></li><li><span>WebAssembly</span></li><li><span>智能 UI</span></li><li><span>React Server Component</span></li><li><span>CSS Houdini</span></li></ul><h3><a name="webcomponents" class="md-header-anchor"></a><span>WebComponents</span></h3><ul><li><span>HTML templates（HTML模板）</span></li><li><span>Custom elements（自定义元素）</span></li><li><span>Shadow DOM（影子DOM）</span></li></ul><h2><a name="我的前端学习路线" class="md-header-anchor"></a><span>我的前端学习路线</span></h2><p><span>虽然上面整理的学习路线知识点非常多，但是大家也别太担心，其实按照一定顺序和方法来学习，并不会很难，聊聊我的学习经历。</span></p><h3><a name="1-快速入门培养兴趣" class="md-header-anchor"></a><span>1. 快速入门，培养兴趣</span></h3><p><span>刚开始学习前端时，一定要以培养兴趣、快速入门为目标。我入门前端时，由于没有基础、啥都不懂，因此选择在线实战教程网站来学习，跟着教程案例一行行把代码敲下来，实时浏览显示效果，很轻松地就把 HTML、CSS、JavaScript 的语法基础过了一遍。但是这时，我对看过的知识点没有什么印象，基本是看了就忘，当我想要自己写一个网站，也根本无从下手。</span></p><p><span>于是，我开始试着死记硬背代码，结果发现背了之后还是不会写。那干脆一不做二不休，直接打开编辑器和教程网站，把之前在线实战时敲过的代码复制粘贴到编辑器中，然后再修改保存，到浏览器中打开文件。这样虽然要在编辑器和浏览器中来回切换，但起码能看到自己的网页文件运行的效果了。后来，我利用浏览器开发者工具提升了自己开发网站的调试效率，敲出的代码达不到满意的效果时，就再去查，再改，再浏览，最后终于完成了一个留言板网站！</span></p><p><span>通过这件事，我明白了一个道理，既然记不住知识，那就先别强行记忆，上手多写，忘了就去查不就好了？不要担心自己知识不够做不出来，只要你去试，都一定能实现。</span></p><h3><a name="2-多看多写巩固基础" class="md-header-anchor"></a><span>2. 多看多写，巩固基础</span></h3><p><span>在这种操作下，我虽然能使用基础三件套开发简易网站了，但做的很慢，还老出问题。于是，我开始完整地看了几本前端入门和项目实战书籍，有三件套入门的，也有响应式网站设计的，还有 JavaScript 综合讲解的，以及一套完整的视频教程，通过这些来复习巩固之前学过的知识，打好了基础，并且了解了更多实战教程上没见到的知识。</span></p><p><span>看书和视频的过程中，我跟着做了几个简易的网站，也是边看边做。在这之后，我发现自己渐渐地能够脱离文档来写网站了！</span></p><h3><a name="3-框架学习学以致用" class="md-header-anchor"></a><span>3. 框架学习，学以致用</span></h3><p><span>但是，总感觉开发网站时，什么都要自己写，重复的代码写一大堆，很麻烦。于是，我试着上网搜了解决这些问题的方法，发现可以用组件库减少重复编写 HTML 和 CSS 代码，于是学了 LayUI，其实和之前一样的，就是打开官网找到要用的组件，然后复制到项目中修改就行了，写的多了竟然还真记住了一些（虽然这个没必要记）。</span></p><p><span>界面和样式代码简化了，但是 JavaScript 写的我依旧头疼。于是我决定进入下一个阶段的学习，当时先看了本书叫《锋利的 jQuery》来学习 jQuery，学会之后使用它趁热打铁做了几个网站，发现的确能大大简化繁琐的 JavaScript DOM 操作，让我尝到了甜头，又有了继续学习前端的动力。</span></p><p><span>在那之后大概半年，我开始学习主流前端框架 Vue，也是跟着视频教程学，并且结合 ElementUI 组件库开发了一个响应式网站。不得不说，习惯了用原生 JavaScript 和 jQuery 开发后，再去用 Vue 开发，真的是爽飞了，小有成就感。</span></p><h3><a name="4-根据需要自主学习" class="md-header-anchor"></a><span>4. 根据需要，自主学习</span></h3><p><span>在那之后，我就是通过不断地做项目来积累经验，既然编程知识太多学不完，那我就随需随学，逐渐拓宽自己的知识面。举个例子，我要做一个移动端 H5 页面，那就去搜 Vue 的移动端组件库，学会了 MintUI、VantUI 等；项目中要处理日期，那我就去搜日期处理库，学会了 Moment.js；项目重复文件和代码太多，我就去网上搜一些组件化、模块化的最佳实践；项目代码太大、加载太慢，我就去网上搜一些前端压缩、性能优化的方式；要把开发好的项目变成 APP，那我就去网上搜到了 Cordova 等打包工具；跟其他同学一起做项目时比较混乱、开发效率低，我就去搜了一些代码规范、前端工程化等；遇到 Bug 时，也是自己去网上搜索解决方案，并且还要看看有没有知识点是我遗漏的，我会再去弥补学习。通过不断实践、不断遇到问题和自主解决问题，我始终保持着学习的积极性，学到了越来越多前端的知识，并通过归纳总结来加深印象。</span></p><h3><a name="5-渐入佳境拓宽视野" class="md-header-anchor"></a><span>5. 渐入佳境，拓宽视野</span></h3><p><span>在那之后，我学前端技术非常快了，像 React、TypeScript、Redux、Dva、Umi、Lerna 等等都随用随学，随学随用。此外，我不仅仅关注前端网页开发本身，还同时关注前端的生态和发展，学习了微前端、Serverless、云开发、低代码等技术，因此个人的能力提升也很大。如今在鹅厂工作中也是，面对各种不同技术栈的前端项目，我都能迎难而上，毕竟不会就学嘛！</span></p><p><span>哦，写的渐入佳境，我都忘了，自己是一名后端工程师，还搁这儿吹牛逼呢（ 所以本路线难免会有不专业的地方，请大家见谅~</span></p><h3><a name="6-总结" class="md-header-anchor"></a><span>6. 总结</span></h3><p><span>总结一下，学前端的路线其实就一句话：基础三件套 =&gt; 巩固基础 =&gt; 学习框架 =&gt; 多做项目 =&gt; 按需学习 =&gt; 拓宽视野。还有一个学任何编程技术都要注意的点，全程多敲代码！多敲代码！多敲代码！</span></p><h2><a name="尾声---持续学习" class="md-header-anchor"></a><span>尾声 - 持续学习</span></h2><h3><a name="前端职业发展的几个阶段" class="md-header-anchor"></a><span>前端职业发展的几个阶段</span></h3><ol><li><span>作为一名合格的前端开发，首先你要能干活、能通过 Vue 之类的前端框架完成公司的需求，比如还原设计稿、开发交互、搭建项目的初始框架（架构）、开发内部的组件库（基建）等等，重点是要学会如何和后端系统进行对接（前后端联调），有时候也需要完成一些简单的服务端开发，比如使用 Node 搭建中间层 / 接入层（BFF）。</span></li><li><span>这就需要你除了学习前端基础三件套之外，还要熟练使用一个开发框架 Vue / React 以及前端工程化的一些工具 / 轮子，比如打包工具用 webpack、性能分析工具、SSR 等），可以帮助你更好地设计项目、开发项目，从而应对需求的变化、使项目更易于维护、可扩展。</span></li><li><span>如果要成为高级前端开发，要了解常用框架 / 工具的运行原理和机制。最好有一个自己擅长 / 专攻的领域，比如低代码、Web IDE、可视化、性能优化、Web Assembly 等等，并且积极参与开源项目和公开分享。</span></li></ol><p><span>随着学习知识的不断丰富和深入，要学会主动到网上关注和汲取知识、了解前端的发展和新技术趋势。比如看书、掘金、InfoQ 等技术网站，或者关注某个领域的大佬、参加一些大会等。</span></p><h3><a name="优秀前端人的特质" class="md-header-anchor"></a><span>优秀前端人的特质</span></h3><ul><li><span>深厚的功底</span></li><li><span>良好的编码习惯</span></li><li><span>发现问题的洞察力</span></li><li><span>思维灵活，善于思考</span></li><li><span>追求技术，紧跟前沿</span></li><li><span>有创造力，有行动力</span></li><li><span>追求用户体验</span></li><li><span>时刻保持好奇</span></li><li><span>全栈意识</span></li><li><span>解决问题的能力强</span></li><li><span>懂得合作和高效沟通</span></li><li><span>重视工作，同样重视生活</span></li><li><span>责任心和全局观</span></li><li><span>个人的进步能带动团队的进步</span></li></ul><h3><a name="学习资源" class="md-header-anchor"></a><span>学习资源</span></h3><ul><li><span>编程导航（包含以下所有资源，强烈推荐 👍）：</span><a href='https://www.code-nav.cn/'><span>https://www.code-nav.cn(opens new window)</span></a></li><li><span>freeCodecamp 在线编程：</span><a href='https://learn.freecodecamp.one/'><span>https://learn.freecodecamp.one/(opens new window)</span></a></li><li><span>阿里云前端实战学习：</span><a href='https://edu.aliyun.com/roadmap/frontend'><span>https://edu.aliyun.com/roadmap/frontend(opens new window)</span></a></li><li><span>W3Cschool 编程入门实战：</span><a href='https://www.w3cschool.cn/codecamp/'><span>https://www.w3cschool.cn/codecamp/(opens new window)</span></a></li><li><span>腾讯云动手实验室：</span><a href='https://cloud.tencent.com/developer/labs/gallery'><span>https://cloud.tencent.com/developer/labs/gallery(opens new window)</span></a></li><li><span>pink老师前端入门教程：</span><a href='https://www.bilibili.com/video/BV14J4114768'><span>https://www.bilibili.com/video/BV14J4114768(opens new window)</span></a></li><li><span>MDN 前端文档：</span><a href='https://developer.mozilla.org/zh-CN'><span>https://developer.mozilla.org/zh-CN(opens new window)</span></a></li><li><span>Node.js 入门：</span><a href='https://cnodejs.org/getstart'><span>https://cnodejs.org/getstart(opens new window)</span></a></li><li><span>前端清单：</span><a href='https://cheatsheets.devtool.tech/'><span>https://cheatsheets.devtool.tech/(opens new window)</span></a></li><li><span>前端小课：</span><a href='https://lefex.github.io/'><span>https://lefex.github.io/(opens new window)</span></a></li><li><span>被删的前端游乐场：</span><a href='http://www.godbasin.com/'><span>http://www.godbasin.com/(opens new window)</span></a></li><li><span>《ES6 入门教程》：</span><a href='https://es6.ruanyifeng.com/'><span>https://es6.ruanyifeng.com/(opens new window)</span></a></li><li><span>谷歌 Web 开发者：</span><a href='https://developers.google.com/web'><span>https://developers.google.com/web(opens new window)</span></a></li><li><span>JavaScript 明星项目：</span><a href='https://risingstars.js.org/2020/zh'><span>https://risingstars.js.org/2020/zh(opens new window)</span></a></li><li><span>Best of JS：</span><a href='https://bestofjs.org/'><span>https://bestofjs.org/(opens new window)</span></a></li><li><span>Codewars：</span><a href='https://www.codewars.com/?language=javascript'><span>https://www.codewars.com/?language=javascript(opens new window)</span></a></li><li><span>Vue.js examples：</span><a href='https://vuejsexamples.com/'><span>https://vuejsexamples.com/(opens new window)</span></a></li></ul><h3><a name="前端资讯" class="md-header-anchor"></a><span>前端资讯</span></h3><ul><li><span>掘金资讯：</span><a href='https://juejin.cn/news'><span>https://juejin.cn/news(opens new window)</span></a></li><li><span>InfoQ：</span><a href='https://www.infoq.cn/topic/Front-end'><span>https://www.infoq.cn/topic/Front-end(opens new window)</span></a></li><li><span>daily.dev：</span><a href='https://daily.dev/'><span>https://daily.dev/(opens new window)</span></a></li></ul><h3><a name="技术博客" class="md-header-anchor"></a><span>技术博客</span></h3><ul><li><span>掘金：</span><a href='https://juejin.cn/frontend'><span>https://juejin.cn/frontend(opens new window)</span></a></li><li><span>腾讯前端 IMWEB：</span><a href='http://imweb.io/'><span>http://imweb.io(opens new window)</span></a></li><li><span>腾讯 Web 前端团队 Alloy Team：</span><a href='http://www.alloyteam.com/'><span>http://www.alloyteam.com(opens new window)</span></a></li><li><span>淘宝前端团队：</span><a href='http://taobaofed.org/'><span>http://taobaofed.org(opens new window)</span></a></li><li><span>百度 Web 前端研发部：</span><a href='http://fex.baidu.com/'><span>http://fex.baidu.com(opens new window)</span></a></li><li><span>京东凹凸实验室：</span><a href='https://aotu.io/'><span>https://aotu.io(opens new window)</span></a></li><li><span>360 奇舞团：</span><a href='https://75team.com/'><span>https://75team.com(opens new window)</span></a></li><li><span>七牛团队技术博客：</span><a href='http://blog.qiniu.com/'><span>http://blog.qiniu.com(opens new window)</span></a></li><li><span>有赞技术团队：</span><a href='https://tech.youzan.com/tag/front-end/'><span>https://tech.youzan.com/tag/front-end/(opens new window)</span></a></li><li><span>百度 EFE Tech：</span><a href='https://efe.baidu.com/'><span>https://efe.baidu.com/(opens new window)</span></a></li><li><span>css-tricks：</span><a href='https://css-tricks.com/archives'><span>https://css-tricks.com/archives(opens new window)</span></a></li><li><span>web.dev：</span><a href='https://web.dev/blog/' target='_blank' class='url'>https://web.dev/blog/</a></li></ul></li></ol></div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/highlight.min.js"></script>
<script src="js/index.js"></script>
</html>